Columnas en el Footer

Hace unos días veíamos una forma de dar utilidad al footer, le añadíamos opción para añadir gadgets y a modo decorativo una imagen de fondo. Adelantaba que si la idea era añadir varios gadgets lo mejor era crear divisiones de forma que el contenido quedara ordenado.

Para empezar lo que haremos será añadir las siguientes líneas de código justo antes de ]]></b:skin>

#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}

Luego dejaremos el footer libre de gadgets si es que los tenemos, podemos hacer dos cosas arrastrarlos a la sidebar provisionalmente o copiar las líneas de código pertenecientes a cada gadget y pegarlas en el bloc de notas para más tarde volver a añadirlos.

Las líneas de código empiezan todas con b:widget más o menos así:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

Una vez dejamos el footer libre buscamos al final de la plantilla lo siguiente:

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

De no tener la opción de añadir gadgets sería algo así:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

En ambos casos lo que haremos será sustituir la línea en negrita por lo siguiente:

<div id='footer-columna-contenedor'>

<div id='footer-izquierdo' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer-centro' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer-derecho' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: none;'>

<b:section class='footer' id='col-bottom' preferred='yes'/>

</div>

<div style='clear:both;'/>

</div>

Miramos en vista previa para ver si es posible guardar los cambios y si es así guardamos.
En plantilla de diseño lo veremos de esta forma.

Ahora vamos a personalizar ese nuevo espacio.
Vamos otra vez justo antes de ]]></b:skin> y añadimos lo siguiente:

#col1{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col1 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col2{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col2 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}
#col3{
background:#000;
margin: 5px;
padding: 5px;
border: 1px solid #fff;
}
#col3 h2{
background:#000;
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 90%;
color:#fff;
}

Nos familiarizamos con los estilos intentando conocer a qué parte corresponde cada uno para poder personalizarlos.

Contenido
footer izquierdo col1
footer centro col2
footer derecho col3

Títulos
footer izquierdo col1 h2
footer centro col2 h2
footer derecho col3 h2

Con background estamos añadiendo color de fondo, en border añadimos estilos al borde y utilizamos color para el color del texto.

Guardamos los cambios y en plantilla de diseño añadimos esos gadgets que tenemos en espera o los que pensamos añadir.El resultado sería algo así.

Un poco triste y aburrido ¿verdad? vamos a darle un poco de vidilla pero primero le daremos color a ese fondo, buscamos las primeras líneas que añadimos y le damos color.

#footer-columna-contenedor {
background:#000;
clear:both;
}

Podemos eliminar el color de fondo y borde de los gadgets y añadir una imagen en su lugar.

#footer-columna-contenedor {
background-image:url('url-de-tu-imagen');
clear:both;
}

Se puede seguir jugando...






Más ejemplos de footer sencillos de crear.